﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="user_modify_vue_component.aspx.cs" Inherits="Template.Web.Admin.user_modify_vue_component" %>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/bootstrap-reset.css" rel="stylesheet" />
    <!--external css-->
    <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="../css/style.css" rel="stylesheet" />
    <link href="../css/style-responsive.css" rel="stylesheet" />
    <link href="../assets/toastr-master/toastr.css" rel="stylesheet" />
    <!-- 按需加载 -->
    <link rel="stylesheet" href="/scripts/blockui/blockUI.css" />
    <link rel="stylesheet" type="text/css" href="/scripts/datepicker/css/bootstrap-datepicker3.min.css" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]><script src="../js/html5shiv.js"></script><script src="../js/respond.min.js"></script><![endif]-->

    <style>
        .form-horizontal .control-label {
            text-align: right;
        }
    </style>
</head>
<body>
    <section class="wrapper site-min-height">
        <!-- page start-->
        <div class="col-lg-12">
            <section class="panel panel-primary">
                <header class="panel-heading"><i class="fa fa-search"></i>用户信息添加</header>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" id="myForm" novalidate="novalidate">
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">用户姓名：<span class="text-danger">*</span></label>
                                <div class="col-md-4">
                                    <input id="userName" name="userName" v-model="model.userName" type="text" class="form-control input_maxlength" placeholder="" maxlength="10" />
                                    <span class="help-block"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">年龄：<span class="text-danger">*</span></label>
                                <div class="col-md-4">
                                    <input id="age" name="age" type="text" v-model="model.age" class="form-control" placeholder="" />
                                    <span class="help-block"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-offset-4 col-md-8">
                                    <button id="btnSubmit" type="submit" class="btn btn-info "><i class="fa fa fa-pencil-square-o"></i>提交</button>
                                    <%--<button id="btnSubmit" type="button" class="btn btn-info " v-on:click="save"><i class="fa fa fa-pencil-square-o"></i>编辑</button>--%>
                                    <button id="btnReturn" type="button" class="btn btn-warning" v-on:click="jumpToList"><i class="fa fa-reply"></i>返回</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <!-- page end-->
    </section>
    <!-- js placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/assets/toastr-master/toastr.js"></script>
    <!-- 按需加载 -->
    <script src="/scripts/validation/jquery.validate.min.js" type="text/javascript"></script>
    <script src="/scripts/validation/localization/messages_zh.js" type="text/javascript"></script>
    <script src="/scripts/datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
    <script src="/scripts/maxlength/bootstrap-maxlength.min.js" type="text/javascript"></script>
    <script src="/scripts/blockui/jquery.blockUI.js"></script>
    <script src="/scripts/util/myUtil2.js"></script>
    <script src="/scripts/myJsPlugin/modifyPlugin.js"></script>
    <script type="text/javascript" src="/scripts/vue/vue.js"></script>
    <script>
        var vm = new Vue({

            // 对象
            el: '#myForm',

            // 原始数据
            data: {
                model: {
                    //userName: null,
                    //age: null
                },
                id: myUtil.getUrlParam('id'),
                handlerUrl: 'handler/userHandler.ashx',
                listUrl: 'user_list_vue.aspx?state=has',
                formName: '#myForm',
                isValid: false
            },

            // 生命周期-创建成功后
            created: function () {
                // 获取数据
                if (this.id) {
                    this.getModel();
                }
                // 填充控件约束
                this.constraint();
            },

            // 监听
            watch: {
                isValid: 'save'
            },

            // 方法
            methods: {

                // 显示等待动画
                showWaitAnimation: function (bool) {
                    if (bool) {
                        myUtil.blockUI({
                            target: this.formName,
                            message: '加载中，请稍等...'
                        });
                    } else {
                        myUtil.unblockUI(this.formName);
                    }
                },

                // 获取数据
                getModel: function () {
                    var self = this;
                    self.showWaitAnimation(true);
                    $.when($.ajax({
                        url: self.handlerUrl,
                        type: 'post',
                        data: {
                            action: 'detail',
                            id: self.id
                        },
                        dataType: 'json'
                    })).done(function (responseData) {
                        self.model = responseData;
                    }).fail(function () {
                        toastr.warning('数据获取失败！');
                    }).always(function () {
                        self.showWaitAnimation(false);
                    });
                },

                // 提交数据
                save: function () {
                    var self = this,
                        params = 'action=submit&&id=' + self.id + '&&' + $(self.$el).serialize();
                    self.showWaitAnimation(true);
                    $.when($.ajax({
                        url: self.handlerUrl,
                        type: 'post',
                        data: params,
                        dataType: 'json'
                    })).done(function (responseData) {
                        self.submitResponse(responseData);
                    }).fail(function () {
                        toastr.warning('数据获取失败！');
                    }).always(function () {
                        self.showWaitAnimation(false);
                    });
                },

                // 提交数据反馈
                submitResponse: function (responseData) {
                    if (responseData.errMsg) {
                        toastr.warning(responseData.errMsg);
                    } else {
                        toastr.success("数据提交成功");
                        window.self.location.href = this.listUrl;
                    }
                },

                // 返回跳转到列表页
                jumpToList: function () {
                    window.self.location.href = this.listUrl;
                },

                // 控件的约束
                constraint: function () {
                    var self = this;
                    $('.input_maxlength').maxlength({
                        limitReachedClass: "label label-danger",
                        alwaysShow: true
                    });

                    $(self.formName).validate({
                        errorElement: 'span',
                        errorClass: 'help-block help-block-error',
                        focusInvalid: true,
                        rules: {
                            userName: {
                                required: true
                            },
                            age: 'required'
                        },
                        invalidHandler: function (event, validator) {

                        },
                        highlight: function (element) {
                            $(element).closest('.form-group').addClass('has-error');
                        },
                        unhighlight: function (element) {
                            $(element).closest('.form-group').removeClass('has-error');
                        },
                        success: function (label) {
                            label.closest('.form-group').removeClass('has-error');
                        },
                        submitHandler: function () {
                            // 监测一个watch属性 isValid=true 表示验证全部通过
                            self.isValid = true;
                            //alert("提交事件!");
                        }
                    });
                }

            }
        });

    </script>

    <script>
        // 或许在$.ajax.done 之后再开始实例化？
    </script>
</body>
</html>
